<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="valuation" @tab-click="getList(1)">
          <el-tab-pane :label="item.name" :name="item.type.toString()" v-for="(item,index) in headeNum" :key="index"/>
        </el-tabs>
        <div class="container">
          <el-form inline size="small" :model="workFrom" ref="workFrom" :label-position="labelPosition"  label-width="110px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="零活搜索：">
                    <el-input v-model="workFrom.name" placeholder="请输入零活名称" clearable  class="selWidth"/>
                  </el-form-item>
                </el-col>
              </el-col>
              <template v-if="collapse">
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item label="是否企业发布：">
                      <el-select v-model="workFrom.is_enterprise" placeholder="是否企业发布" clearable class="selWidth">
                        <el-option label="全部" :value="0"/>
                        <el-option label="是" :value="1"/>
                        <el-option label="否" :value="2"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
              </template>
              <el-col  :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right workFrom">
                <el-form-item>
                  <el-button label="default" class="" icon="el-icon-search" size="mini" type="primary"  @click="workSearchs">搜索</el-button>
                  <el-button class="ResetSearch mr10" @click="reset('workFrom')" icon="el-icon-refresh" size="mini">重置</el-button>
                  <a class="ivu-ml-8" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      展开 <i class="el-icon-arrow-down"></i>
                    </template>
                    <template v-else>
                      收起 <i class="el-icon-arrow-up"></i>
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border
      >
        <el-table-column
          prop="id"
          label="ID"
          min-width="60"
        />
        <el-table-column
          label="名称"
          min-width="120"
          prop="name"
        />
        <el-table-column
          label="工种类型"
          min-width="120"
          prop="type_text"
        />
        <el-table-column
          label="开工时间"
          min-width="120"
          prop="start_time_text"
        />
        <el-table-column
          label="用工人数"
          min-width="120"
          prop="population"
        />
        <el-table-column
          label="用工价格"
          min-width="120"
        >
          <template slot-scope="scope">
<!--            <p>计价方式：{{scope.row.valuation_text | filterEmpty}}</p>-->
            <p>单价：{{scope.row.price}} {{scope.row.price_text}}</p>
            <p>预估工期：{{scope.row.duration}} {{scope.row.unit_text}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="工作地址"
          min-width="120"
          prop="address"
        />
        <el-table-column
          label="是否企业发布"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{scope.row.is_enterprise | isEnterpriseFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="发布者"
          min-width="120"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.user">
              <span>{{scope.row.user.name | filterEmpty  }} | {{scope.row.user.phone_number | filterEmpty}} </span>
            </template>
            <template v-else>
              <span>-</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="发布时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{scope.row.create_time | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{scope.row.process_status_text | filterEmpty}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="认证状态"-->
<!--          min-width="120"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span :style="scope.row.autherized===1?'color:#91cc75':'color:red'">{{scope.row.autherized_text}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="robWork(scope.row.id)" size="mini" v-hasPermi="['admin:work:rob']" style="margin-right:10px;">抢活</el-button>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="onWorkDetails(scope.row.id)" v-if="checkPermi(['admin:work:info'])">零活详情</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[15, 30, 45, 60]"
          :page-size="workFrom.limit"
          :current-page="workFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--详情-->
    <details-from ref="workDetail" :id="id"/>
  </div>
</template>

<script>
import { workListApi,robWorkApi} from '@/api/workApi'
import detailsFrom from './workDetail'
import Cookies from 'js-cookie'
import { checkPermi, checkAdminRole } from "@/utils/permission"; // 权限判断函数
import {Debounce} from '@/utils/validate'
import * as backupsApi from '@/api/backups'

export default {
  name: 'WorkIndex',
  components:{ detailsFrom },
  filters: {
    isEnterpriseFilter(status) {
      const statusMap = {
        0: '-',
        1: '是',
        2: '否',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      loadingBtn: false,
      Visible: false,
      labelPosition:'right',
      collapse: false,
      props: {
        children: 'child',
        label: 'name',
        value: 'name',
        emitPath: false
      },
      headeNum: [
        { 'type': '', 'name': '全部零活' },
        { 'type': '1', 'name': '短期工' },
        { 'type': '2', 'name': '钟点工' },
        //{ 'type': '3', 'name': '计件工' },
      ],
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      valuation: '',//顶部计价方式筛选
      workFrom: {
        is_enterprise: 0,
        //accessType: 0,
        name: '',
        page: 1,
        limit: 15,
      },
      grid: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },

      loading: false,
      id: null,
    }
  },
  activated(){
    this.workFrom.name = '';
    this.workFrom.is_enterprise = 0;
    this.valuation = '0';
    this.getList(1);
  },
  mounted() {
    this.getList()
  },
  methods: {
    checkPermi,

    reset(formName) {
      this.workFrom = {
        //accessType: 0,
        is_enterprise: 0,
        name: '',
        page: 1,
        limit: 15,
      }
      this.getList()
    },

    //抢活
    robWork(id) {
      this.$confirm('确定抢当前零活?').then(() => {
        robWorkApi(id).then(data => {
          this.getList()
          this.$message.success('抢活成功')
        })
      })
    },

    // 详情
    onWorkDetails(id) {
      this.id = id
      this.$refs.workDetail.getDetail(id)
      this.$refs.workDetail.dialogVisible = true
    },

    // 搜索
    workSearchs () {
      this.workFrom.page = 1;
      this.getList();
    },

    // 列表
    getList(num) {
      this.listLoading = true
      this.workFrom.page = num ? num : this.workFrom.page;
      this.workFrom.valuation = this.valuation
      if(this.valuation == 0) this.workFrom.valuation =''
      if (checkAdminRole()){
        this.workFrom.department = 0 //所有
      }else{
        this.workFrom.department = 2 //所有未被抢
        this.workFrom.process_status = 0 //审核中的，人力资源账号排除取消、过期等
      }
      workListApi(this.workFrom).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.count
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    pageChange(page) {
      this.workFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.workFrom.limit = val
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">
/*.timeBox{*/
/*width: 100%;*/
/*::v-deep.el-form-item__content{*/
/*width: 87% !important;*/
/*}*/
/*}*/
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.text-right{
  text-align: right;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}
.selWidth{
  width: 100% !important;
}
.seachTiele{
  line-height: 30px;
}
.container{
  min-width: 821px;
  ::v-deep.el-form-item{
    width: 100%;
  }
  ::v-deep.el-form-item__content{
    width: 72%;
  }
}
.ivu-ml-8{
  font-size: 12px;
  color: #1682e6;
}
.btn_bt{
  border-top:1px dashed #ccc;
  padding-top: 20px;
}
.relative{
  position: relative;
}
</style>
